<template>
  <div>
    <el-row>
      <span id="title"><b>转账管理</b></span>
    </el-row>

    <el-row class="shaixuan_1"
            type="flex"
            align="middle"
            style="text-align: center">
      <el-col :span="3">
        <span>转账数据</span>
      </el-col>
      <el-col :span="3"
              :offset="4">
        <el-button type="primary">导出数据</el-button>
      </el-col>
      <el-col :span="3">
        <el-button>全部</el-button>
      </el-col>
      <el-col :span="3">
        <el-button>最近一周</el-button>
      </el-col>
      <el-col :span="3">
        <el-button>最近30天</el-button>
      </el-col>
      <el-col :span="5">
        <el-date-picker v-model="value1"
                        type="date"
                        placeholder="选择日期">
        </el-date-picker>
      </el-col>
    </el-row>

    <el-row type="flex"
            align="middle"
            class="shaixuan_20"
            style="text-align: center">
      <el-col :span="8"><b><span class="countComputed">可用金额<div>{{availableFunds}}</div></span></b></el-col>
      <el-col :span="8"><b><span class="countComputed">转账金额<div>{{eftSum}}</div></span></b></el-col>
      <el-col :span="8"><b><span class="countComputed">转账笔数<div>{{eftCount}}</div></span></b></el-col>
    </el-row>
    <el-row type="flex"
            align="middle"
            id="data_1">
      <el-col :span="3">
        <i class="iconfont icon-querylist"></i>
        <span>转账记录</span>
      </el-col>
      <el-col :span="9"
              :offset="12">
        <el-button type="primary"
                   @click="addEftVisble=true">新增转账</el-button>
      </el-col>
    </el-row>
    <el-row>
      <TransferManagementData style="height:100%"
                              ref="child"></TransferManagementData>
    </el-row>
    <el-dialog title="发起转账"
               :visible.sync="addEftVisble">
      <el-form :model="form"
               ref="eftForm"
               :rules="rules">
        <el-form-item prop="recevier"
                      label="接收人"
                      :label-width="formLabelWidth">
          <el-input v-model="form.recevier"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="转账金额"
                      :label-width="formLabelWidth">
          <el-input v-model="form.amount"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="bankNumber"
                      label="银行卡号"
                      :label-width="formLabelWidth">
          <el-input v-model="form.bankNumber"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="description"
                      label="转账说明"
                      :label-width="formLabelWidth">
          <el-input v-model="form.description"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="eftConfirm('eftForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import TransferManagementData from './transferManagementData.vue';
export default {
  components: {
    TransferManagementData
  },

  data () {
    return {
      form: {
        recevier: '',
        amount: 0,
        bankNumber: '',
        sender: 'sezer',
        description: ''
      },
      addEftVisble: false,
      availableFunds: 0,
      eftSum: 0,
      eftCount: 0,
      formLabelWidth: '120px',
      rules: {
        recevier: [{ required: true, message: '请输入接收人', trigger: 'blur' }],
        bankNumber: [{ required: true, message: '请输入银行卡号', trigger: 'blur' }]
      }
    }
  },
  mounted () {
    this.$axios.get("/financial/transfer/availableFunds").then(res => {
      if (res.data.code === 200) {
        this.availableFunds = res.data.data
      }
    }),
      this.$axios.get("/financial/transfer/eftSum").then(res => {
        if (res.data.code === 200) {
          this.eftSum = res.data.data
        }
      }),
      this.$axios.get("/financial/transfer/eftCount").then(res => {
        if (res.data.code === 200) {
          this.eftCount = res.data.data
        }
      })
  },
  methods: {
    eftConfirm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post("/financial/transfer/addEftRecord", this.form).then(res => {
            if (res.data.code == 200) {
              this.$refs.child.uploadTable(),
                this.$axios.get("/financial/transfer/availableFunds").then(res => {
                  if (res.data.code === 200) {
                    this.availableFunds = res.data.data
                  }
                }),
                this.$axios.get("/financial/transfer/eftSum").then(res => {
                  if (res.data.code === 200) {
                    this.eftSum = res.data.data
                  }
                }),
                this.$axios.get("/financial/transfer/eftCount").then(res => {
                  if (res.data.code === 200) {
                    this.eftCount = res.data.data
                  }
                })
              this.$refs.eftForm.resetFields();
              this.addEftVisble = false
              this.$message({
                message: '转账成功',
                type: 'success'
              });

            } else {
              this.$message.error('转账失败');
            }
          })

        } else {
          return false;
        }
      });
    }
  }

}
</script>
<style scoped>
#title {
  font-size: 30px;
}
.shaixuan_1 {
  margin-top: 20px;
  margin-bottom: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
.shaixuan_2 {
  height: 50px;
}
#data_1 {
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  background-color: rgb(241, 241, 241);
}
.menu {
  width: 50%;
  text-align: center;
}
.countComputed {
  font-size: 2em;
}
</style>